import { View, Image, Text } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import BannerSwiper from '../../components/common/BannerSwiper'
import CategoryGrid from '../../components/common/CategoryGrid/CategoryGrid'
import SearchBar from '../../components/common/SearchBar/SearchBar'
import FloatLoginBar from '../../components/common/FloatLoginBar'
import './index.scss'

const bannerList = [
  { id: 1, imageUrl: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 2, imageUrl: 'https://img.yzcdn.cn/vant/cat.jpeg' }
]

const tagList = ['专业', '方便', '透明', '开票', '包邮']

const productCategories = [
  { id: 1, name: '骨灰容器', icon: require('../../assets/images/icons/funeral-urn.jpg') },
  { id: 2, name: '寿衣类', icon: require('../../assets/images/icons/burial-clothes.jpg') },
  { id: 3, name: '殡葬花艺', icon: require('../../assets/images/icons/funeral-flowers.png') },
  { id: 4, name: '纸扎祭品', icon: require('../../assets/images/icons/memorial-items.jpg') }
]
const serviceCategories = [
  { id: 5, name: '悼念定制', icon: require('../../assets/images/icons/memorial.png') },
  { id: 6, name: '法事服务', icon: require('../../assets/images/icons/legal.png') },
  { id: 7, name: '遗体接运', icon: require('../../assets/images/icons/transport.png') },
  { id: 8, name: '祭扫服务', icon: require('../../assets/images/icons/memorial-service.png') }
]

export default function Index() {
  useLoad(() => {})

  // 处理分类点击事件
  const handleCategoryClick = (item: any) => {
    console.log('分类点击事件触发:', item)
    if (item.name === '骨灰容器') {
      console.log('跳转到骨灰容器分类页面')
      // 使用全局数据存储要跳转的分类信息
      Taro.setStorageSync('targetCategory', { categoryId: 1, tab: 'category' })
      // 跳转到分类页面（tabbar页面）
      Taro.switchTab({
        url: '/pages/category/index'
      })
    } else {
      console.log('跳转到其他分类页面:', item.name)
      // 使用全局数据存储要跳转的分类信息
      Taro.setStorageSync('targetCategory', { categoryId: item.id, tab: 'category' })
      // 跳转到分类页面（tabbar页面）
      Taro.switchTab({
        url: '/pages/category/index'
      })
    }
  }

  return (
    <View className='index'>
      {/* 顶部大黄条 */}
      <View className='index-topbar'>
        <View className='index-topbar__left'>
          <View className='index-topbar__left-row'>
            <Text className='index-brand'>无忧</Text>
            <Text className='index-slogan'>让你永无后顾之忧</Text>
          </View>
        </View>
        <View className='index-topbar__right'>
          <Image className='index-topbar__icon' src={require('../../assets/images/icons/funeral-urn.png')} />
          <Image className='index-topbar__icon' src={require('../../assets/images/tabbar/cart.png')} />
        </View>
      </View>

      {/* 内容区弹性布局 */}
      <View className='index-main'>
        {/* 搜索栏区域 */}
        <View className='index-searchbar-area'>
          <SearchBar />
        </View>
        {/* 轮播图区域 */}
        <View className='index-banner-area'>
          <BannerSwiper images={bannerList} height='100%' radius={1} />
        </View>
        {/* 横向标签区 */}
        <View className='index-tags-area'>
          <View className='index-tags'>
            {tagList.map(tag => (
              <Text className='index-tag' key={tag}>{tag}</Text>
            ))}
          </View>
        </View>
        {/* 商品分类宫格 */}
        <CategoryGrid categories={productCategories} className='index-grid product' onItemClick={handleCategoryClick} />
        {/* 服务分类宫格 */}
        <CategoryGrid categories={serviceCategories} className='index-grid service' onItemClick={handleCategoryClick} />
      </View>

      <FloatLoginBar />
    </View>
  )
}
